<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尹烽宇</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
         html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .dakai{
      width: 100%;
      height: 45px;
      background-color: rgb(56, 55, 55);
      display: flex;
      color: #fff;
    }
    .dakai li{
      display: flex;
      align-items:center;
      justify-content: center;
    }
    .dakai li:nth-child(1){
      width: 8%;
    }
    .dakai li:nth-child(1) img{
      width: 10px;
    }
    .dakai li:nth-child(2){
      width: 10%;
    }
    .dakai li:nth-child(2) img{
      width: 30px;
    }
    .dakai li:nth-child(3){
      width: 57%;
    }
    .dakai li:nth-child(4){
      width: 25%;
      background-color: #F63515;
    }
    /* 8 10 57 25 */
    /* 搜索 */
    
    .top{
        width: 100%;
        height: 44px;
        background-color: rgb(219, 25, 25);
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position:sticky;
        top: 0;
        z-index: 99;
    }
    .top .top-one{
      width: 40px;
      height: 44px;
      
    }
    .top-one span{
      margin: 14px 0 0 15px;
    width: 20px;
    height: 18px;
    display: block;
    background: url("img/分类.png") no-repeat;
    background-size: 100% 100%;

    }
    .top .top-two{
      flex: 1;
      border-radius: 15px;
      background-color: #fff;
      height: 30px;
    }
    .top-two .jd{
      width: 20px;
    height: 15px;
    background: url("img/logo.png") no-repeat;
    background-size: 20px 15px;
    margin: 8px 8px 0 15px;
    position: relative;
    z-index: 1;
    float: left;
    }
    .jd::after{
      content: "";
    position: absolute;
    border-right: 1.5px solid #ddd;
    top: 0;
    left: 25px;
    height: 16px;
    }
    .top-two .fangdajing{
    width: 18px;
    height: 15px;
    background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
    background-position: -80px 0;
    background-size: 200px;
    margin: 8px 0 0 15px;
    position: relative;
    z-index: 1;
    display: flex;
    }
    .top .top-there{
      width: 40px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 轮播 */
    .lun{
        width: 100%;
        height: 140px;
        display: flex;
        
    }
    .lun img{
        width: 95%;
        height: 95%;
        border-radius: 10px;
    }
        .nav{
            width: 100%;
            height: 165px;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            z-index: 10;
        }
        a{
            text-decoration: none;
            color: #666;
        }
        .nav li{
            width: 20%;
            height: 74px;
            text-align: center;
            
        }
        .nav li span{
            display: block;
            font-size: 12px;
            
        }
        .nav li img{
            width: 40px;
           
        }
        .dibox{
          width: 100%;
          height: 45px;
          display: flex;
          position: absolute;
          bottom: 0px;

        }
        .dibox li{
          flex: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .dibox li img{
          width: 60px;
          height: 46px;
        }
        .box{
          margin-top: 10px ;
        }
    </style>
</head>
<body>
  <!-- 顶部弹框——立即打开 -->
    <ul class="dakai">
      <li><img src="./img/cha.png" alt=""></li>
      <li><img src="./img/jd.png" alt=""></li>
      <li>打开京东App，购物更轻松</li>
      <li>立即打开</li>
    </ul>

  <!-- 顶部搜索导航栏 -->
    <div class="top">
      <!-- 左按钮 -->
      <div class="top-one">
        <span></span>
      </div>
      <!-- 搜索框 -->
      <div class="top-two">
        <div class="jd"></div>
        <div class="fangdajing"></div>
      </div>
      <!-- 登录按钮 -->
      <div class="top-there">登录</div>
    </div>
    <!-- 轮播图 -->
    <div class="lun">
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./img/1.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/2.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/3.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/4.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/5.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/6.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/7.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./img/8.jpg" alt=""></div>
              
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        
          <!-- Swiper JS -->
          <script src="./swiper-bundle.min.js"></script>
        
          <script>
            var swiper1 = new Swiper1('.swiper-container', {
              loop:true,
              autoplay:false,
              pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
              },
            });
          </script>
      </div>

    

    <!-- 导航条 -->
    <div class="box">
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <ul class="nav">
            <li><a href=""><img src="./img/1.png" alt=""><span>京东超市</span> </a></li>
            <li><a href=""><img src="./img/2.png" alt=""><span>潮流服饰</span> </a></li>
            <li><a href=""><img src="./img/3.png" alt=""><span>生活生鲜</span> </a></li>
            <li><a href=""><img src="./img/4.png" alt=""><span>京东数码</span> </a></li>
            <li><a href=""><img src="./img/6.png" alt=""><span>立即领券</span> </a></li>
            <li><a href=""><img src="./img/7.png" alt=""><span>9.9折</span> </a></li>
            <li><a href=""><img src="./img/7.png" alt=""><span>京东到家</span> </a></li>
            <li><a href=""><img src="./img/8.png" alt=""><span>充值缴费</span> </a></li>
            <li><a href=""><img src="./img/9.png" alt=""><span>立即借钱</span> </a></li>
            <li><a href=""><img src="./img/10.png" alt=""><span>超级尊享</span> </a></li>
    
        </ul></div>
      <div class="swiper-slide"><!-- 导航条 -->
        <ul class="nav">
            <li><a href=""><img src="./img/11.png" alt=""><span>京东进口</span> </a></li>
            <li><a href=""><img src="./img/12.png" alt=""><span>京东拍卖</span> </a></li>
            <li><a href=""><img src="./img/13.png" alt=""><span>唯品会</span> </a></li>
            <li><a href=""><img src="./img/14.png" alt=""><span>玩3C</span> </a></li>
            <li><a href=""><img src="./img/15.png" alt=""><span>沃尔玛</span> </a></li>
            <li><a href=""><img src="./img/16.png" alt=""><span>美装馆</span> </a></li>
            <li><a href=""><img src="./img/17.png" alt=""><span>京东旅行</span> </a></li>
            <li><a href=""><img src="./img/18.png" alt=""><span>拍拍二手</span> </a></li>
            <li><a href=""><img src="./img/19.png" alt=""><span>物流查询</span> </a></li>
            <li><a href=""><img src="./img/20.png" alt=""><span>全部</span> </a></li>
    
        </ul></div>
    
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      loop:true,
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
  </script>
</div>


<!-- 底部导航条 -->
<ul class="dibox">
  <li><a href=""><img src="./img/21.png" alt=""></a></li>
  <li><a href=""><img src="./img/22.png" alt=""></a></li>
  <li><a href=""><img src="./img/23.png" alt=""></a></li>
  <li><a href=""><img src="./img/24.png" alt=""></a></li>
  <li><a href=""><img src="./img/25.png" alt=""></a></li>
</ul>
</body>
</html>